{% extends "common/layout.html" %}
{% block content %}
    <section class="single">
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<ol class="breadcrumb">
						  <li><a href="{{ buildUrl("/") }}">Home</a></li>
						  <li class="active">{{ news.genres }}</li>
						</ol>
						<article class="article main-article">
							<header>
								<h1>{{ news.title }}</h1>
								<ul class="details">
									<li>Posted on {{ news.date }}</li>
									<li><a>{{ news.genres }}</a></li>
									<li>By <a href="#">{{ news.authors }}</a></li>
								</ul>
							</header>
							<div class="main">
                                {% if news.photo %}
                                <div class="featured" align="center">
										<img src="{{ pic_path ~ news.hash~ ".jpg" }}" height="360" width="600">
										<figcaption>Image by {{ news.authors }}</figcaption>
								</div>
                                {% endif %}
                                <p>{{ news.text }}</p>
							</div>
						</article>
						<div class="line"><div>You May Also Like</div></div>
						<div class="row">
                            {% for item in recommend_list %}
                                <article class="article related col-md-6 col-sm-6 col-xs-12">
								<div class="inner">
									<figure>
										<a href="{{ buildUrl("single")~"?id="~item.id }}">
											<img src="{{ pic_path ~ item.hash~ ".jpg" }}">
										</a>
									</figure>
									<div class="padding">
										<h2><a href="{{ buildUrl("single")~"?id="~item.id }}">{{ item.title }}</a></h2>
										<div class="detail">
											<div class="category"><a href="#">{{ item.genres }}</a></div>
											<div class="time">{{ item.date }}</div>
										</div>
									</div>
								</div>
							</article>
                            {% endfor %}
						</div>
					</div>
				</div>
			</div>
		</section>
{% endblock %}